<!-- 理化检测项目统计 -->
<template>
  <div>
    <div class="searchbox">
      <el-form :inline="true" size="small" label-width="100px">
        <el-form-item label="零件号">
          <el-input size="small" placeholder="请选择零件号" disabled style="width: 140px;" v-model="partNumber"  @change='changePart' ></el-input>
          <select-part-number-button @partVal="getPartVal" style="display: inline-block;margin-left: 8px;"></select-part-number-button>
        </el-form-item>
        <el-form-item label="检测类型">
          <el-select v-model="testType" placeholder="请选择" @change="changeType">
            <el-option v-for="item in typeList" :key="item.code" :label="item.name" :value="item.code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="检测项目">
          <el-select v-model="fieldName" placeholder="请选择">
            <el-option v-for="item in showFieldList" :key="item.id" :label="item.fieldDisplay" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="原材料炉号">
          <el-input size="small" v-model="materialFurnanceNumber" placeholder="原材料炉号"></el-input>
        </el-form-item>
            <el-form-item label="日期">
              <el-date-picker v-model="form.fromDate" type="date" value-format="yyyy-MM-dd HH:mm:ss" placeholder=""></el-date-picker>
            </el-form-item>
            <el-form-item label="至" label-width="25px">
              <el-date-picker v-model="form.toDate" type="date" value-format="yyyy-MM-dd HH:mm:ss" placeholder=""></el-date-picker>
            </el-form-item>
        <!-- <el-form-item label="日期:">
          <el-date-picker size="small" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm:ss" v-model="date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 420px">
          </el-date-picker>
        </el-form-item> -->
        <el-form-item style="margin-left: 20px;">
          <el-button size="mini" type="primary" @click="showList()">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" @click="clenaFrom" >清除</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="contentbox">
      <data-infomation :data='resultData' :testType='this.testType'
          :fieldId= this.fieldName :partId= this.partId :materialFurnanceNumber= this.materialFurnanceNumber
          :fromDate= this.form.fromDate :toDate= this.form.toDate></data-infomation>
      <div id='my-chart' style='width：600px;height:600px'></div>
    </div>
  </div>
</template>

<script>
  import {
    getProjectStatistics,
    getPartFieldList,
    getTypeList,
    getFiledListByPartId,getPositionList
  } from "service/task";
  import JtEasyCollapse from 'components/jt-easy-collapse/index';
  import ChoosePart from 'dialog/resource-management/part-number-button';
  import SelectPartNumber from 'dialog/experimental-management/select-part-number-button'; // 选择零件号
  import DataInfo from 'dialog/report-center/physical-and-chemical-testing-project-statistics/data-infomation';
  // import echarts from 'echarts';
  import echarts from 'echarts';
import { getLableFromList } from '../../../utils/common';
  export default {
    name: 'RemindingCenter',
    components: {
      'select-part-number-button': SelectPartNumber,
      'jt-easy-collapse': JtEasyCollapse,
      'part-number-button': ChoosePart,
      'data-infomation': DataInfo
    },
    data() {
      return {
        options: [],
        testType: "",
        fieldName: "",
        partNumber: "",
        partName:'',
        form: {
          fromDate: "",
          toDate: ""
        },
        partGraphNumber:'',
        graphVersion:'',
        partId: "",
        positionList:[],
        materialFurnanceNumber: "",
        date: "",
        testList: [],
        typeList: [],
        fieldList: [],
        showFieldList: [],
        resultData:{},
      }
    },
    mounted() {
      getTypeList().then(res => {
        this.typeList = res.data.result;
      });
      getPositionList().then(res=>{
        this.positionList = res.data.result;
      })
      // getPartFieldList().then(res => {
      //   this.fieldList = res.data.result.content;
      // });
      this.drawLine();
    },

    methods: {
      changeType(val) {
        if (this.testType) {
          let that = this;
          this.showFieldList=[];
          this.fieldList.forEach(e => {
          if (e.testType == that.testType) {
              if(e.operator!='choose'){
                that.showFieldList.push(e);
              }
            }
          })
        } else {
          this.showFieldList = this.fieldList;
        }
        this.mergeFieldContent();
      },
      mergeFieldContent(){
        this.showFieldList.forEach(e=>{
          //debugger;
          e.fieldDisplay=e.fieldName+'-'+getLableFromList(this.positionList,e.position);
        })
      },
      changePart() {
        if (this.partId) {
          getFiledListByPartId(this.partNumber).then(res => {
            this.fieldList = res.data.result;
            this.showFieldList=[];
            if (this.testType) {
              let that = this;
              this.fieldList.forEach(e => {
                if (e.testType == that.testType) {
                  that.showFieldList.push(e);
                }
              })
            } else {
              this.showFieldList = this.fieldList;
            }
          })
        }
        this.testType='';
        this.fieldName='';
        this.mergeFieldContent();
      },
      // 选择零件号的值
      getPartVal(val) {
        // console.log(val)
        this.partNumber = val.partNumber;
        this.partId = val.id;
        this.partName = val.partName;
        this.graphVersion = val.graphVersion;
        this.partGraphNumber = val.partGraphNumber;
        this.changePart();
      },
      // 负责人
      // partVal(partNumber, partId) {
      //   this.partNumber = partNumber;
      //   this.partId = partId;
      // },
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('my-chart'))
        // 绘制图表
        myChart.setOption({
          title: {
            text: '理化检测项目统计'
          },
          tooltip: {},
          xAxis: {
            type: 'category',
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [],
            type: 'line'
          }]
        });
      },
      clenaFrom(){
        this.partNumber = "";
        this.materialFurnanceNumber = "";
        this.partId = "";
        this.partName = "";
        this.graphVersion = "";
        this.partGraphNumber = "";
        this.testType="";
        this.fieldName="";
        this.date=[];
      },
      // 表格数据展示
      showList() {
        if (!this.testType || !this.fieldName || !this.form.fromDate || !this.form.toDate || !this.partId) {
          this.$message({
            type: 'error',
            message: '请选择零件号、检测类型、检测项目和起止时间!'
          });
          return;
        }
        getProjectStatistics({
          // this.axios.get('/system/testFieldList', {
          testType: this.testType,
          fieldId: this.fieldName,
          partId: this.partId,
          materialFurnanceNumber: this.materialFurnanceNumber,
          fromDate: this.form.fromDate,
          toDate: this.form.toDate
        }).then(res => {
          if (res.data.result.list) {
            this.testList = res.data.result.list;

            this.testList.forEach(e=>{
              e.act1=e.act1?e.act1.toFixed(2):e.act1;
              e.act2=e.act2?e.act2.toFixed(2):e.act2;
              e.act3=e.act3?e.act3.toFixed(2):e.act3;
              e.act4=e.act4?e.act4.toFixed(2):e.act4;
              e.act5=e.act5?e.act5.toFixed(2):e.act5;
              if(e.act1){
                e.avgData = e.act1;
                if(e.act2){
                  if(e.act3){
                     if((e.act1-e.act2)*(e.act2-e.act3)>0 ){
                        e.avgData = e.act2;
                    }else if((e.act2-e.act1)*(e.act1-e.act3)>0 ) {
                        e.avgData = e.act1;
                    }
                    else{
                        e.avgData = e.act3;
                    }
                  }
                }
              }
            })

            this.resultData.dataList=this.testList;
            this.resultData.fromDate=this.form.fromDate.split(' ')[0];
            this.resultData.toDate=this.form.toDate.split(' ')[0];
            this.resultData.partName=this.partName;
            this.resultData.partNumber=this.partNumber;
            this.resultData.partGraphNumber=this.partGraphNumber;
            this.resultData.graphVersion=this.graphVersion;


            for(let i=0;i<this.fieldList.length;i++){
              if(this.fieldList[i].id==this.fieldName){
                this.resultData.fieldName=this.fieldList[i].fieldName;
              }
            }



            // this.resultData.fromDate=this.form.fromDate;

            var xData = [];
            var yData = [];
            var y1Data=[];
            var y2Data=[];
            let yAVgDateData = [];

          for (var i = 0; i < this.testList.length; i++) {
              y1Data.push(this.testList[i]['col1']);
              y2Data.push(this.testList[i]['col2']);
              xData[i] = this.testList[i]['heatingNumber'];
              // yAVgDateData[i] =
              //   this.testList[i]['avgData'];
              if(this.testList[i]['act1']){
                yData.push(this.testList[i]['act1']);
                if(this.testList[i]['act2']){
                  if(this.testList[i]['act3']){
                    if((this.testList[i]['act1']-this.testList[i]['act2'])*(this.testList[i]['act2']-this.testList[i]['act3'])>0 ){
                        yData.push(this.testList[i]['act2']);
                    }else if((this.testList[i]['act2']-this.testList[i]['act1'])*(this.testList[i]['act1']-this.testList[i]['act3'])>0 ) {
                        yData.push(this.testList[i]['act1']);
                    }
                    else{
                        yData.push(this.testList[i]['act3']);
                    }
                  }
                }
              }
            }
            let myChart = echarts.init(document.getElementById('my-chart'));
            myChart.clear();
            // 绘制图表
            myChart.setOption({
              title: {
                text: '理化检测项目统计'
              },
              tooltip: {},
              xAxis: {
                type: 'category',
                data: xData
              },
              yAxis: {
                type: 'value'
              },
              legend:{
                data:['实测值','上限','下限']
              },
              color:['#46A3FF','#000','#000'],
              series: [{
                name:'实测值',
                data: yData,
                type: 'line'
              },{
                itemStyle:{
                    normal:{
                        lineStyle:{
                            width:2,
                            type:'dashed'  //'dotted'虚线 'solid'实线
                        }
                    }
                },
                name:'上限',
                data: y1Data,
                type: 'line'
              },{
                itemStyle:{
                    normal:{
                        lineStyle:{
                            width:2,
                            type:'dashed'  //'dotted'虚线 'solid'实线
                        }
                    }
                },
                name:'下限',
                data: y2Data,
                type: 'line'
              }]
            });
          } else {
            return;
          }
        });
      },
    }
  }
</script>
